<template>
    <div class="dashboard-container">
        <div class="app-container">
            <el-card shadow="never">
                <!-- 搜索 -->
                <div class="row">
                    <div class="col">
                        <el-form>
                            <el-form-item label="关键字" label-width="56px">
                                <el-input class="search" v-model="keyword" placeholder="根据编号搜索"
                                          @change="render"></el-input>
                                <div class="btn col">
                                    <el-button @click="clear">清除</el-button>
                                    <el-button type="primary" @click="render">搜索</el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <!-- 所有数据条数 -->
                <div class="datas"><i class="el-alert__icon el-icon-info"></i>数据一共 {{ counts }} 条</div>
                <!-- 表格 -->
                <template>
                    <el-table
                        :header-cell-style="{background:'#FAFAFA'}"
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column
                            prop="id"
                            label="编号"
                            width="190">
                        </el-table-column>
                        <el-table-column
                            prop="questionType"
                            label="题型"
                            width="80">
                            <template v-slot='{row}'>
                                {{ questionTypes(row.questionType) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="questionIDs"
                            label="题目编号"
                            width="200">
                            <template v-slot='scope'>
                                <span
                                    class="itemcolor"
                                    v-for="(item,index) in scope.row.questionIDs" :key="index"
                                    @click="opan(item.id)">{{ item.number }}<br>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="addTime"
                            label="录入时间">
                        </el-table-column>
                        <el-table-column
                            prop="totalSeconds"
                            label="答题时间(s)">
                        </el-table-column>
                        <el-table-column
                            prop="accuracyRate"
                            label="正确率(%)">
                        </el-table-column>
                        <el-table-column
                            prop="userName"
                            label="录入人">
                        </el-table-column>
                        <el-table-column
                            label="操作">
                            <template v-slot='{row}'>
                                <el-button
                                    @click.native="del($event, row.id)"
                                    title="删除"
                                    type="danger"
                                    plain
                                    icon="el-icon-delete"
                                    circle
                                ></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <!-- 分页 -->
                <div class="block">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10, 15, 20, 25]"
                        :page-size="100"
                        layout=" prev,  pager, next, sizes, jumper"
                        :total="counts">
                    </el-pagination>
                </div>
            </el-card>
        </div>
        <!-- 自定义组件 -->
        <view-dialog v-model="showDialog" :currentID="currentID"></view-dialog>
    </div>
</template>

<script>
import { randoms } from '@/api/hmmm/questions'

export default {
    data () {
        return {
            showDialog: false,
            currentID: 0,
            currentPage4: 4,
            page: '1',
            pagesize: '10',
            keyword: '',
            counts: 0,
            questionIDs: [],
            tableData: []
        }
    },
    created () {
        this.render()
    },
    methods: {
        // 获取列表数据/渲染
        async render () {
            const res = await randoms({
                page: this.page,
                pagesize: this.pagesize,
                keyword: this.keyword
            })
            //   console.log(res)
            const rs = res.data.items
            this.tableData = rs
            this.counts = res.data.counts
        },
        // 删除数据
        async del (e, id) {
            e.target.blur()
            e.target.parentNode.blur()
            this.currentID = id
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
                this.$nextTick(() => {
                    const data = this.tableData.filter(item => {
                        return item.id !== this.currentID
                    })
                    this.tableData = data
                    this.counts--
                })
                if (this.tableData.length === 1 && this.page > 1) this.page--
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`)
            this.page = 1
            this.pagesize = val
            this.render()
        },
        async handleCurrentChange (val) {
            const res = await randoms({
                page: val,
                pagesize: this.pagesize,
                keyword: this.keyword
            })
            this.tableData = res.data.items
        },
        clear () {
            this.keyword = ''
            this.render()
        },
        // 题目类型辨别
        questionTypes (type) {
            if (type === '1') return '单选'
            if (type === '2') return '多选'
            if (type === '3') return '简答'
        },
        async opan (id) {
            this.currentID = id
            this.showDialog = true
        }
    }

}
</script>

<style lang='scss' scoped>
.app-container {
    padding: 5px 10px;

    .row {
        display: flex;
        justify-content: end;

        .col {
            // padding: 0 40px 0 0;
            flex: 1;

            .btn {
                float: right;
                padding: 0;
            }
        }
    }

    .datas {
        width: 100%;
        height: 36px;
        background-color: #F4F4F5;
        padding: 8px 16px;
        font-size: 12px;
        color: #909399;
        line-height: 23px;
        border-radius: 5px;
        margin-block: 20px;
    }

    .el-alert__icon {
        margin-right: 8px;
    }

}

.search {
    width: 250px;
    height: 32px !important;
    line-height: 32px;
}

label {
    font-weight: 700;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

.el-table {
    border-top: 1px solid #EBEEF5;
    border-left: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
}

.block {
    margin: 20px 0;
    float: right;
}

.itemcolor {
    color: #00B2FD;
    cursor: pointer
}
</style>
